<template>
  <div class="doctorDetails">
    <navBar :name="names" />
    <div class="doctorDetails_top">
      <div class="doctorDetails_top_img">
        <img
          src="https://q1.qlogo.cn/g?b=qq&nk=1044910888@qq.com&s=100"
          alt=""
        />
      </div>
      <div class="doctorDetails_top_name">
        <div class="doctorDetails_top_name_top">李博</div>
        <div class="doctorDetails_top_name_bot">副主任</div>
      </div>
      <div class="doctorDetails_top_share">
        <div class="doctorDetails_top_share_dianzan">
          <van-icon name="like-o" size=".7rem" />
        </div>
        <div class="doctorDetails_top_share_shareing">
          <van-icon name="share-o" size=".7rem" />
        </div>
      </div>
    </div>
    <div class="doctorDetails_detail">
      <div style="display: flex">
        <span>
          <van-icon
            name="checked"
            size=".6rem"
            color="#0052da"
            style="margin-right: 5px"
          />
        </span>
        擅长:眼部常见的病多发病丶眼光骨折眼部眼中眼光骨折眼部眼中
      </div>
      <div class="doctorDetails_detail_moredata">查看更多</div>
    </div>
    <div class="doctorDetails_appoint">
      <div class="doctorDetails_appoint_title">预约挂号</div>
      <div class="doctorDetails_appoint_middle">
        <van-collapse v-model="activeNames">
          <van-collapse-item
            title="河南科技大学第一附属医院(开元校区)"
            name="1"
          >
            代码是写出来给人看的，附带能在机器上运行。
          </van-collapse-item>
        </van-collapse>
        <div class="doctorDetails_appoint_tag">
          <van-tag type="primary" class="doctorDetails_appoint_box" plain>
            标签
          </van-tag>
          <van-tag type="primary" class="doctorDetails_appoint_box" plain>
            三日内有号
          </van-tag>
        </div>
      </div>
      <div class="doctorDetails_appoint_time">
        <scroll>
          <linuxTime :value="values" @valueChange="recordValue" />
        </scroll>
      </div>
    </div>
    <div style="border-bottom: 1px solid #ccc; background-color: #fafafa"></div>
    <div class="doctorDetails_appoint_main">
      <div class="doctorDetails_appoint_main_box">
        <div class="doctorDetails_appoint_main_time">08:00-09:00</div>
        <div class="doctorDetails_appoint_main_surplus">剩余:1</div>
        <div class="doctorDetails_appoint_main_booking">
          <doctorBooking />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import doctorBooking from "./components/doctorBooking.vue";
import scroll from "@/components/scroll/scroll.vue";
import linuxTime from "@/components/commonComponents/liunxTime.vue";
import { reactive, toRefs } from "vue";
import navBar from "@/components/commonComponents/navBar.vue";
export default {
  name: "doctorDetails",
  components: { navBar, linuxTime, scroll, doctorBooking },
  setup() {
    const data = reactive({
      names: "医生首页",
      activeNames: [],
      values: 0,
    });
    function recordValue(value) {
      data.values = value;
      console.log(data.values);
    }
    return {
      ...toRefs(data),
      recordValue,
    };
  },
};
</script>

<style lang="scss" scope>
.doctorDetails {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fafafa;
  overflow-y: auto;
  z-index: 10;
  &_appoint {
    margin: 15px 0 0 0;
    padding: 15px 20px;
    background-color: #fff;
    &_main {
      width: 100%;
      padding: 20px 10px 20px 20px;
      background-color: #fff;
      &_time {
        flex: none;
        width: 40%;
        height: 100%;
        align-items: center;
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 16px;
      }
      &_surplus {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
      }
      &_booking {
        flex: none;
        height: 100%;
        font-size: 14px;
        width: 60px;
        padding: 2px;
      }
      &_box {
        width: 100%;
        height: 50px;

        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    &_time {
      width: 100%;

      height: 90px;
      margin-top: 10px;
      white-space: nowrap;
      overflow: hidden;
    }
    &_box {
      margin: 0 5px;
    }
    &_tag {
      width: 100%;
      padding: 0 15px;
    }
    &_title {
      font-size: 18px;
      font-weight: 540;
      margin-bottom: 15px;
    }
    &_middle {
      & .van-badge__wrapper {
        width: auto;
      }
      & .van-hairline--top-bottom:after,
      .van-hairline-unset--top-bottom:after {
        border: none;
      }
    }
  }
  &_detail {
    padding: 5px 20px 25px 25px;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #fff;
    & span {
      line-height: 25px;
    }
    &_moredata {
      position: absolute;
      top: 70%;
      right: 5%;
      font-size: 14px;
      color: #0052da;
    }
  }
  &_top {
    padding: 25px 10px 25px 20px;
    display: flex;
    background-color: #fff;
    position: relative;
    &_share {
      position: absolute;
      right: 0;
      top: 20%;
      display: flex;
      &_dianzan {
        margin: 0 10px;
      }
      &_shareing {
        margin: 0 10px;
      }
    }
    &_name {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      &_top {
        font-size: 22px;
        font-weight: 550;
        margin-right: 15px;
      }
      &_bot {
        transform: translateY(20%);
        font-size: 14px;
        color: #aeaeae;
      }
    }
    &_img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20px;
      & img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
